<template>
  <div class="w-full h-full">
    <div v-for="(item, index) in data" :key="index" class="">
      <el-row :class="'pt-10 pb-10 items-content-' + index">
        <el-col :md="3" :lg="3" :xl="3" hidden-md-and-down></el-col>
        <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
          <template v-if="index % 2 === 0">
            <el-row>
              <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <div class="text-right">
                  <img :src="item.bgurl" />
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                <div class="w-full h-full pt-6 pb-10 pl-10">
                  <h2 class="service-item-title">{{ item.title }}</h2>
                  <span class="service-item-line flex w-20 h-[1px] mt-4"></span>
                  <div>
                    <p class="p-3">{{ item.description.title }}</p>
                    <p v-for="(itemVantage, index) in item.description.vantages" :key="index"
                      class="service-item-vantages p-2">
                      {{ itemVantage }}
                    </p>
                  </div>
                  <div class="flex p-3">
                    <div v-for="(itemStep, index) in item.stepList">
                      <span class="number-span pr-4">{{ index + 1 }}</span><span class="pr-4">{{ itemStep }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </template>
          <template v-else>
            <el-row>
              <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <div class="w-full h-full pt-6 pb-10">
                  <h2 class="service-item-title">{{ item.title }}</h2>
                  <span class="service-item-line flex w-20 h-[1px] mt-4"></span>
                  <div>
                    <p class="p-3">{{ item.description.title }}</p>
                    <p v-for="(itemVantage, index) in item.description.vantages" :key="index"
                      class="service-item-vantages p-2">
                      {{ itemVantage }}
                    </p>
                  </div>
                  <div class="flex p-3">
                    <div v-for="(itemStep, index) in item.stepList">
                      <span class="number-span pr-4">{{ index + 1 }}</span><span class="pr-4">{{ itemStep }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <div>
                  <img :src="item.bgurl" class="w-full" />
                </div>
              </el-col>
            </el-row>
          </template>
        </el-col>
        <el-col :md="1" :lg="1" :xl="1" hidden-md-and-down></el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useAppStore } from "@/store";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { WIDTH } from "@/utils/commonSize";
import { companyBaseInfo } from "@/api/base_info";
const appStore = useAppStore();
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
});

console.log("props serviceItem", props.data);
</script>
<style lang="scss" scoped>
img {
  max-width: 70%;
  height: 300px;
}

.items-content-0 {
  background-color: var(--color-wirte);
}

.items-content-1 {
  background-color: #3cb9a2;
}

.items-content-2 {
  background-color: var(--color-wirte);
}

.items-content-3 {
  background-color: #a5cd40;
}

.items-content-4 {
  background-color: var(--color-wirte);
}

.service-item-title {
  font-size: var(--text-h3-size);
  color: var(--color-text-title) !important;
}

.service-item-line {
  background-color: var(--bg-footer-border);
}

.service-item-vantages {
  font-size: var(--text-little-size);
}

.number-span {
  color: var(--color-primary);
}
</style>
